<template>
  <!-- 反馈意见 -->
  <div class="feedback">
    <div class="feedback_title">反馈意见</div>
    <div class="feedback_input">
      <el-input
        type="textarea"
        placeholder="您的建议，是我们不断改进的动力，谢谢！"
        v-model="textarea"
        maxlength="300"
        :autosize="{ minRows: 4, maxRows: 6 }"
        show-word-limit
      >
      </el-input>
    </div>
    <div class="feedback_phone">
      <span>手机号码</span>
      <el-input v-model="phone" placeholder="请输入手机号"></el-input>
    </div>
    <el-divider></el-divider>
    <div class="feedback_tip">
      <p>温馨提示：</p>
      <p>
        您在使用优塑宝的过程中遇到任何问题，我们会在第一时间处理您的反馈，或直接添加官方客服QQ：24844500085，
        我们将在线为您处理问题。
      </p>
    </div>
    <button class="feedback_btn" @click="submitFeedback">提交</button>

    <!-- 提示弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="noticeDialog"
      width="30%"
      center
      class="del_dialog"
    >
      <span>是否提交此条信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noticeDialog = false">取消</el-button>
        <el-button type="primary" @click="sure">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      phone: "",
      noticeDialog: false,
    };
  },
  methods: {
    submitFeedback() {
      var reg_tel =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (!reg_tel.test(this.phone)) {
        this.$message.error("请输入正确的手机号码");
      } else if (this.textarea == "") {
        this.$message.error("请输入内容");
      } else {
        this.noticeDialog = true;
      }
    },

    async sure() {
      let params = {
        mobile: this.phone,
        content: this.textarea,
      };
      let res = await this.$apiFun.submitFeedback(params);
      if (res.code == 200) {
        this.$message.success("提交成功");
        this.noticeDialog = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      margin-left: 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;

      .el-button--default {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 5px;
        display: block;
      }
      .el-button--primary {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}

.feedback {
  height: 6rem;
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.1rem;
  .feedback_title {
    text-align: left;
    font-size: 0.24rem;
    font-weight: bold;
    color: #333333;
    margin: 0rem 0.4rem 0.3rem;
  }
  .feedback_input {
    margin: 0rem 0.4rem;
  }
  .feedback_phone {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 0.2rem;
    margin-left: 0.4rem;
    span {
      font-size: 0.2rem;
      font-weight: 400;
      color: #333333;
      margin-right: 0.1rem;
    }
    /deep/.el-input {
      width: 2.2rem;
    }
  }
  .feedback_tip {
    margin: 0rem 0.4rem;
    p {
      font-size: 0.2rem;
      font-weight: 400;
      color: #333333;
      line-height: 0.3rem;
      text-align: left;
    }
  }
  .feedback_btn {
    width: 2.3rem;
    height: 0.4rem;
    background: #f42551;
    border-radius: 5px;
    font-size: 0.16rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 0.4rem;
    border: none;
    margin-top: 0.6rem;
    cursor: pointer;
  }

  .del_dialog {
    /deep/.el-dialog {
      .el-dialog__body {
        text-align: center;
        span {
          font-size: 0.2rem;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
}
</style>